<template>
  <view>
    <view class="header">
      <image src="./back.png" mode="" @tap="back"></image>
      <span>添加好友</span>
      <image src="./likr.png" mode=""></image>
    </view>
    <view class="kb"></view>
    <!-- 内容 -->
    <view class="main">
      <view class="mian-header">
        <view class="mian-header-tit" @click="change((num = 1))"
          ><span>推荐</span><view class="shu" v-if="num == 1"></view
        ></view>
        <view class="mian-header-tit" @click="change((num = 2))"
          ><span>明星</span> <view class="shu" v-if="num == 2"></view
        ></view>
        <view class="mian-header-tit" @click="change((num = 3))"
          ><span>运动员</span><view class="shu" v-if="num == 3"></view
        ></view>
        <view class="mian-header-tit" @click="change((num = 4))"
          ><span>瑜伽</span><view class="shu" v-if="num == 4"></view
        ></view>
        <view class="mian-header-tit" @click="change((num = 5))"
          ><span>更多</span><view class="shu" v-if="num == 5"></view
        ></view>
      </view>
      <!-- 人 -->
      <view class="people" v-for="item in frends" :key="item.id">
        <image class="people-img" src="./bg.png" mode=""></image>
        <view class="people-main">
          <view class="people-main-left">
            <view class="people-main-name">{{ item.name }}</view>
            <view class="people-main-num">{{ item.fs }}万粉丝</view>
            <view class="people-main-tit">{{ item.neirong }}</view>
          </view>
          <view class="people-main-right">
            <view class="but"> +关注 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      frends: [
        { id: 1, fs: "12.2", neirong: "上网分分你我我都快启动器都没到" },
        { id: 2, fs: "12.3", neirong: "上大肆地花生豆我按哦爱红市第三" },
        { id: 3, fs: "12.4", neirong: "速度快的撒迪卡侬林大青蛙多群是" },
        { id: 4, fs: "12.5", neirong: "仓库课程可能就是我的错菜市场才" },
        { id: 5, fs: "12.6", neirong: "世界杯十大科技查查看哪款锂电池" },
      ],
    };
  },
  methods: {
    change(num) {
      console.log(num);
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
.header {
  width: 750rpx;
  height: 160rpx;
  position: fixed;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  font-size: 36rpx;
  z-index: 10;
  background-color: #ffffff;
  margin-bottom: 30rpx;
  image {
    width: 60rpx;
    height: 60rpx;
  }
}
.kb {
  width: 750rpx;
  height: 180rpx;
}
.main {
  width: 100%;
  height: 700rpx;
  // border: 1px solid red;

  padding: 5rpx 20rpx;
  .mian-header {
    width: 100%;
    height: 80rpx;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 36rpx;
    margin-bottom: 10rpx;
    .mian-header-tit {
      // border: 1px solid red;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      span {
        width: 100%;
      }
      text-align: center;
      flex-direction: column;
      .shu {
        width: 40rpx;
        height: 6rpx;
        background-color: #f4333c;
      }
    }
  }
  .people {
    width: 100%;
    height: 180rpx;
    border-bottom: 1rpx solid #d2d2d2;
    display: flex;
    align-items: flex-start;

    .people-img {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .people-main {
      width: 650rpx;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      .people-main-left {
        width: 400rpx;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        .people-main-name {
          width: 100%;
          font-size: 28rpx;
        }
        .people-main-num {
          width: auto;
          height: 40rpx;
          background-color: #fff8ec;
          color: #faad39;
          font-size: 20rpx;
        }
        .people-main-tit {
          width: 100%;
          color: #8c8c8c;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .people-main-right {
        width: 200rpx;
        height: 100%;
        // border: 1px solid blue;
        display: flex;
        justify-content: center;
        align-items: center;
        .but {
          width: 144rpx;
          height: 56rpx;
          border: 2rpx solid #f4333c;
          border-radius: 28rpx;
          background-color: #fcf0f0;
          text-align: center;
          line-height: 56rpx;
          color: #f4333c;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
